<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        html, body {
           padding: 0;
           margin: 0;
           height: 100%;
           width: 100%;
        }
        #home {
           padding: 20px
        }
        .form {
           margin-block-end: 0
        }
        .pagination {
           margin-top: 20px
        }
        h3 {
           margin-block-start: 0
        }
    </style>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div id="home">
  <h3>学生成绩列表</h3>
  <div class="filter">
    <el-form :inline="true" :model="params" class="form" size="mini">
      <el-form-item label="班级">
        <el-select v-model="params.classId" placeholder="班级">
          <el-option v-for="item in classList" :label="item.classname" :value="item.classname"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="季度">
        <el-select v-model="params.season" placeholder="季度">
          <el-option v-for="(item, index) in seasonList" :label="item" :value="index+1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-input v-model="params.keywords" placeholder="请输入搜索关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getGradeList(1)">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table
          :data="tableData"
          size="mini"
          height="500"
          style="width: 100%">
    <el-table-column
            prop="stuId"
            label="学号"
            align="center"
            width="100"
    >
    </el-table-column>
    <el-table-column
            prop="stuName"
            label="姓名"
    >
    </el-table-column>
    <el-table-column
            prop="subjectName"
            label="课程名"
    >
    </el-table-column>
    <el-table-column
            prop="classId"
            label="班级"
    >
    </el-table-column>
    <el-table-column
            label="分数"
    >
      <template slot-scope="scope">
        <el-input v-if="scope.row.isEdit" v-model="scope.row.grade" style="width: 100px" size="small"
                  placeholder="请输入内容"></el-input>
        <span v-else>{{ scope.row.grade }}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="操作"
    >
      <template slot-scope="scope">
        <div>
          <el-button
                  v-if="!scope.row.isEdit"
                  size="mini"
                  type="danger"
                  @click="handleEdit(scope.row)">编辑
          </el-button>
          <div
                  v-else
          >
            <el-button
                    size="mini"
                    type="success"
                    @click="handleSave(scope.row)">确认{{ scope.isEdit }}
            </el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleCancel(scope.row)">取消{{ scope.isEdit }}
            </el-button>
          </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageNo"
            :page-sizes="pageSizes"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :page-count="pageTotal"
            :total="listTotal"
    >
    </el-pagination>
  </div>
</div>
<script>

  var app = new Vue({
    el: '#home',
    data() {
      return {
        params: {
          keywords: '',
          classId: '',
          season: '',
          pageNo: 1,
          pageSize: 5,
        },
        tableData: [],
        classList: [],
        seasonList: [],
        pageSizes: [5, 10, 20, 30, 50],
        pageTotal: 0,
        listTotal: 0,
      };
    },
    methods: {
      // 编辑
      handleEdit(row) {
        row.isEdit = true;
        console.log(row);
      },
      // 保存
      async handleSave(row) {
        console.log(row);
        row.isEdit = false;
        try {
          const data = await axios.get('/teacher/insertGrade', {
            params: {
              stuId: row.stuId,
              grade: parseInt(row.grade),
            }
            },
          );
          console.log('data', data);
          if (data) {
            this.$message({
              message: '修改成功',
              type: 'success',
            });
          }
        } catch (err) {
          row.grade = row.preGrade;
          this.$message({
            message: '修改失败',
            type: 'error',
          });
        }
      },
      // 取消
      handleCancel(row) {
        row.isEdit = false;
        row.grade = row.preGrade;
      },
      // 筛选
      async getGradeList(pageNo) {
        if (pageNo) {
          this.params.pageNo = pageNo;
        }
        const params = this.clearEmptyParams(this.params);
        let data = await axios.get('/teacher/getGradeByFilter', { params });
        this.tableData = data.data.list.map(item => {
          return {
            ...item,
            isEdit: false,
            preGrade: item.grade,
          };
        });
        console.log('data', data)
        this.pageTotal = data.data.pages;
        this.listTotal = data.data.total;
        this.pageTotal = data.data.pageTotal;
      },
      // 清楚空参数
      clearEmptyParams(obj) {
        const params = Object.assign({}, obj);
        for (const key in params) {
          if (!params[key] && key !== 'isEnable' && params[key] !== 0 && params[key] !== false) {
            delete params[key];
          }
        }
        return params;
      },
      // 获取班级列表
      async getClassList() {
        const data = await axios.get('/getClassList');
        this.classList = data.data;
      },
      // 获取季度列表
      async getSeasonList() {
        const data = await axios.get('/getSeasonList');
        this.seasonList = data.data;
      },
      handleSizeChange(pageSize) {
        this.params.pageSize = pageSize;
        this.getGradeList(1);
      },
      handleCurrentChange(pageNo) {
        this.getGradeList(pageNo);
      },
    },
    mounted() {
      this.getGradeList(1);
      this.getClassList();
      this.getSeasonList();
    },
  });
</script>
</body>
</html>
